<template>
    <div style="width:600px;">
        <!-- <div v-for="(item,index) in keywords" :key="index" class="words-content" :class="index%2==0?'slice-boder':''"> -->
        <div v-for="(item,index) in keywords" :key="index" class="words-content slice-boder" :class="item.show?'words-active':''">
            <span class="words" :title="item.value" :class="item.competition?'big-words':'tiny-words'">{{item.value}}</span>
            <span v-if="item.competition" class="compete">竞争：<span v-if="item.competition">{{item.competition | compeFilter}}</span></span>
            <span v-if="item.reach" class="count">预计展示数：<span>{{item.reach | numberFilter}}</span></span>
            <span class="tip-icon-opre">
                <el-popover
                  popper-class="keywords-popover"
                  placement="bottom-start"
                  width="150"
                  @show="item.show = true"
                  @hide="item.show = false"
                  :visible-arrow="visibleArrow"
                  v-model="item.show"
                  trigger="click">
                  <div class="opre-box">
                        <div class="opre-item" @click="handleClick(index,'BROAD',item)">
                            <i class="tip-icon iconfont icon-widely-match"></i>
                            <span class="match-type">广泛匹配</span>
                            <i v-if="item.macthType == 'BROAD'" class="iconfont icon-select" style="font-size:12px;"></i>
                        </div>
                        <div class="opre-item" @click="handleClick(index,'EXACT',item)">
                            <i class="tip-icon iconfont icon-complete-match"></i>
                            <span class="match-type">完全匹配</span>
                            <i v-if="item.macthType == 'EXACT'" class="iconfont icon-select" style="font-size:12px;"></i>
                        </div>
                        <div class="opre-item" @click="handleClick(index,'PHRASE',item)">
                            <i class="tip-icon iconfont icon-phrase-match" style="font-size:12px;"></i>
                            <span class="match-type">词组匹配</span>
                            <i v-if="item.macthType == 'PHRASE'" class="iconfont icon-select" style="font-size:12px;"></i>
                        </div>
                    </div>

                    <el-button slot="reference" title="广泛匹配" v-if="item.macthType == 'BROAD'" class="icon-opre" size="large" type="text"><span class="tip-icon iconfont icon-widely-match"></span></el-button>
                    <el-button slot="reference" title="完全匹配" v-if="item.macthType == 'EXACT'" class="icon-opre" size="large" type="text"><span class="tip-icon iconfont icon-complete-match"></span></el-button>
                    <el-button slot="reference" title="词组匹配" v-if="item.macthType == 'PHRASE'" class="icon-opre" size="large" type="text"><span class="tip-icon iconfont icon-phrase-match" style="font-size:12px;"></span></el-button>
                </el-popover>
            </span>
            <span @click="handleDelet(index)" class="icon-opre tip-icon-close">
                <i class="iconfont icon-close"></i>
            </span>
        </div>
    </div>
        
</template>
<style>
</style>
<script>
    import Vue from 'vue'
    import { mapGetters, mapActions, mapMutations} from 'vuex';
    import { Popover,Button } from 'element-ui'

    Vue.use(Popover)
    Vue.use(Button)

    export default{
        data () {
            return {
                visibleArrow:false,
                //keywords:[]
            }
        },
        props: {
            'type' : {
                default: '1'
            }
        },
        filters:{
            compeFilter(value){
                switch (value){
                    case 'HIGH':
                        return '高';
                        break;
                    case 'MIDEL':
                        return '中';
                        break;
                    case 'LOW':
                        return '低';
                        break;
                    default:
                        return value;
                }
            },
            numberFilter(value){
                if(value >=10000){
                    let fixedNum = (value / 10000).toFixed(1) + '万';
                    return fixedNum;
                }else{
                    return value;
                }
            }
        },
        computed : {
            ...mapGetters({
                'editAudienceForm' : 'editAudienceForm'
            }),
            keywords(){
                if(this.type == 'include'){
                    return this.editAudienceForm.keywords.include;
                }else{
                    return this.editAudienceForm.keywords.exclude;
                }
            }
        },
        mounted() {
        },
        methods:{
            handleClick(index,type,item){
                item.show = false;
                if(this.type=='include'){
                    this.editAudienceForm.keywords.include[index].macthType = type;
                }else{
                    this.editAudienceForm.keywords.exclude[index].macthType = type;
                }
            },
            handleDelet(index){
                if(this.type=='include'){
                    this.editAudienceForm.keywords.include.splice(index,1);
                }else{
                    this.editAudienceForm.keywords.exclude.splice(index,1);
                }
                
            }
        }
    }
</script>

<style lang="scss" scoped>
$MainColor: #0686F9;
$warnningColor:#FFB100;
$mainBorder: #EAEEF0;
$disableColor:#D5DFE4;
$disClickColor:#999999;
$bgColor: #F4F7F9;
$fontColor:#333333;
$tipsColor:#666666;
$errorColor:#FF3526;
$iconColor:#B0BFC6;
$iconHoverColor:#0786F9;
$wihte:#fff;


.words-popover{
    width: 200px;
}
.words-tag{
    display: inline-block;
}
.words-content{
    padding: 0 15px;
    margin:2px 0; 
    display: inline-block;
    line-height: 24px;
    position: relative;
    span{
        display: inline-block;
        height: 24px;
        line-height: 24px;
        vertical-align: bottom;
    }
    .icon-close{
        height: 18px;
        line-height: 18px;
    }
}
.words-content:hover{
    .icon-opre{
        color: $iconHoverColor;
    }
    .tip-icon{
        color: $iconHoverColor;
    }
}
.words-active{
    .icon-opre{
        color: $iconHoverColor;
    }
    .tip-icon{
        color: $iconHoverColor;
    }
}
.slice-boder{
    border-right:1px solid $disableColor;
}
.words{
    font-size: 14px;
    margin-right: 10px;
}
.big-words{
    max-width: 290px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tiny-words{
    max-width: 480px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.compete{
    color: $disClickColor;
    margin-right: 10px;
}
.count{
    color: $disClickColor;
    margin-right: 10px;
}
.tip-icon-opre{
    font-size: 20px;
    color: $iconColor;
    display: inline-block;
    margin-right:5px;
    margin-left:10px;
}
.icon-opre{
    color: $iconColor;
    padding:0;
}
.tip-icon{
    font-size: 18px;
    color: $iconColor;
    display: inline-block;
    width: 16px;
    transform: scale(1.1);
}

.opre-item{
    height: 32px;
    line-height: 32px;
    padding-left: 5px;
    cursor: pointer;
}
.opre-item:hover{
    background:$bgColor;
}
.tip-icon-close:hover{
    color: $iconHoverColor;
    cursor: pointer;
}
.tip-icon-close{
    font-size: 12px;
    margin-left: 8px;
    transform: scale(0.9);
    color: $iconColor;
    display: inline-block;
}
.opre-box{
    background: $wihte;
    font-size: 14px;
    .icon-select{
        color:$MainColor;
    }
}
.match-type{
    display: inline-block;
    width: 90px;
    margin-left: 10px;
    color:$disClickColor;
}

</style>